<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>
    <script>
        //文档加载结束执行 （html里文档结构）
        $(document).ready(function(){
            //写操作
            alert("Hello,JQuery!")
            //设置当前app的样式
            $("#app").css({
                //json对象格式
                "width":"100px",
                "height":"400px",
                "background-color":"blue",
                "color":"#ffffff"
            }).html("hello JQuery!") //页面显示hello JQuery!
        })


        //工厂函数 等于$(document).ready(function()
        $(function(){
          //创建新的元素
          let div=$("<div></div>")
          div.css({
              "width":"100px",
              "height":"100px",
              "background-color":"yellow",
                "color":"#ffffff"
          }).html("hello!")
          //拼接元素
          $("#app").append(div)
        })
    </script>
</head>
<body>
    <div id="app"></div>
</body>
</html>